<template>
  <div class="main">
    <div class="main-1">
      <div class="main-2">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="成员账号" prop="adminAccount">
            <el-input
              v-model="ruleForm.adminAccount"
              placeholder="输入成员名称"
            />
          </el-form-item>
          <el-form-item label="成员姓名" prop="name">
            <el-input v-model="ruleForm.name" placeholder="输入成员姓名" />
          </el-form-item>
          <el-form-item
            prop="email"
            label="Email"
            :rules="[
              {
                required: true,
                message: 'Please input email address',
                trigger: 'blur',
              },
              {
                type: 'email',
                message: 'Please input correct email address',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input v-model="ruleForm.email" />
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-select v-model="ruleForm.departmentId" placeholder="请选择">
              <el-option
                v-for="item in state1.department"
                :value="item.id"
                :key="item.id"
                :label="item.departmentName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属场馆" prop="gymVenueIds">
            <el-checkbox-group v-for="(item,index) in state1.venue" v-model="ruleForm.gymVenueIds" class="ml-4 checkbox">
              <el-checkbox :value=item.id :label="item.id" >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否为管理人员">
            <el-radio-group v-model="ruleForm.isSalesperson" class="ml-4">
              <el-radio label="0" size="large">是</el-radio>
              <el-radio label="1" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="ruleForm.password2"></el-input>
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input v-model="ruleForm.remark" type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              新建
            </el-button>
            <el-button @click="Return">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { department, addMember ,venueList} from '../../http/api'
import { ElMessage } from 'element-plus'

const radio = ref(1)
var state1:any = reactive({ department: [],venue:[] })
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  password: '',
  password2: '',
  remark: '',
  adminAccount: '',
  departmentId: '',
  email: '',
  gymVenueIds: [],
  isSalesperson: '',
  name: '',
  id:''
})
const rules = reactive<FormRules>({
  adminAccount: [
    { required: true, message: '请输入你的账号', trigger: 'blur' },
    { min: 6, max: 10, message: '长度6-10位', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入你的名称', trigger: 'blur' },
    { min: 2, max: 5, message: '长度2-5位', trigger: 'blur' },
  ],
  departmentId: [
    {
      required: true,
      message: '所属部门不能为空',
      trigger: ['blur', 'change'],
    },
  ],
  gymVenueIds: [
    {
      required: true,
      message: '所属场馆不能为空',
      trigger: ['blur', 'change'],
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  ],
  password2: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  ],
})
onMounted(() => {
  getDepartment()
  getVenues()
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
  console.log(ruleForm)
  addMember(ruleForm)
    .then((res) => {
      console.log(res)
      if (res.data.code === 50000) {
        ElMessage({
          message: res.data.msg,
          type: 'warning',
        })
      } else if (res.data.code === 0) {
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
        router.push({ path: 'MemberManagement', query: { msg: '返回' } })
      }
    })
}
// 渲染部门
const getDepartment:any = ()=>{
   department().then((res) => {
    console.log(res.data)
    state1.department = res.data
  })
}
//渲染场馆
const getVenues:any = ()=>{
  venueList().then((res)=>{
    state1.venue = res.data
    console.log(state1.venue);
    
  })
}
const router = useRouter()
function Return() {
  router.push({ path: 'MemberManagement', query: { msg: '返回' } })
}
</script>

<style scoped>
.main {
  width: 100%;
  margin: auto;
  background-color: #f2f2f2;
  height: 1000px;
  padding: 15px 20px;
  border-radius: 15px;
}
.main-1 {
  width: 96%;
  margin: auto;
  background-color: white;
  padding: 15px 20px;
  border-radius: 15px;
}
.main-2 {
  border: 1px solid #e4e4e4;
  padding: 15px 20px;
  border-radius: 15px;
}
.demo-ruleForm {
  width: 60%;
  margin: auto;
}
.checkbox{
  margin: 0 15px;
}
</style>
